

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <title>Proton - Admin Template</title>		
		
		<!-- Import google fonts - Heading first/ text second -->
        <link rel='stylesheet' type='text/css' href='http://fonts.useso.com/css?family=Open+Sans:400,700|Droid+Sans:400,700' />
        <!--[if lt IE 9]>
<link href="http://fonts.useso.com/css?family=Open+Sans:400" rel="stylesheet" type="text/css" />
<link href="http://fonts.useso.com/css?family=Open+Sans:700" rel="stylesheet" type="text/css" />
<link href="http://fonts.useso.com/css?family=Droid+Sans:400" rel="stylesheet" type="text/css" />
<link href="http://fonts.useso.com/css?family=Droid+Sans:700" rel="stylesheet" type="text/css" />
<![endif]-->

		<!-- Favicon and touch icons -->
		<link rel="shortcut icon" href="assets/ico/favicon.ico" type="image/x-icon" /> 

	    <!-- Css files -->
	    <link href="assets/css/bootstrap.min.css" rel="stylesheet">		
		<link href="assets/css/jquery.mmenu.css" rel="stylesheet">		
		<link href="assets/css/font-awesome.min.css" rel="stylesheet">
		<link href="assets/plugins/jquery-ui/css/jquery-ui-1.10.4.min.css" rel="stylesheet">	  
	    <link href="assets/css/style.min.css" rel="stylesheet">
		<link href="assets/css/add-ons.min.css" rel="stylesheet">	

	    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	    <!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>
</head>

<body>
	<!-- start: Header -->
	<div class="navbar" role="navigation">
	
		<div class="container-fluid">		
			
			<ul class="nav navbar-nav navbar-actions navbar-left">
				<li class="visible-md visible-lg"><a href="page-inbox.html#" id="main-menu-toggle"><i class="fa fa-th-large"></i></a></li>
				<li class="visible-xs visible-sm"><a href="page-inbox.html#" id="sidebar-menu"><i class="fa fa-navicon"></i></a></li>			
			</ul>
			
			<form class="navbar-form navbar-left">
				<button type="submit" class="fa fa-search"></button>
				<input type="text" class="form-control" placeholder="Search..."></a>
			</form>
			
	        <ul class="nav navbar-nav navbar-right">
				<li class="dropdown visible-md visible-lg">
	        		<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope-o"></i><span class="badge">5</span></a>
	        		<ul class="dropdown-menu">
						<li class="dropdown-menu-header">
							<strong>Messages</strong>
							<div class="progress thin">
							  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
							    <span class="sr-only">30% Complete (success)</span>
							  </div>
							</div>
						</li>
						<li class="avatar">
							<a href="page-inbox.html">
								<img class="avatar" src="assets/img/avatar1.jpg">
								<div>New message</div>
								<small>1 minute ago</small>
								<span class="label label-info">NEW</span>
							</a>
						</li>
						<li class="avatar">
							<a href="page-inbox.html">
								<img class="avatar" src="assets/img/avatar2.jpg">
								<div>New message</div>
								<small>3 minute ago</small>
								<span class="label label-info">NEW</span>
							</a>
						</li>
						<li class="avatar">
							<a href="page-inbox.html">
								<img class="avatar" src="assets/img/avatar3.jpg">
								<div>New message</div>
								<small>4 minute ago</small>
								<span class="label label-info">NEW</span>
							</a>
						</li>
						<li class="avatar">
							<a href="page-inbox.html">
								<img class="avatar" src="assets/img/avatar4.jpg">
								<div>New message</div>
								<small>30 minute ago</small>
							</a>
						</li>
						<li class="avatar">
							<a href="page-inbox.html">
								<img class="avatar" src="assets/img/avatar5.jpg">
								<div>New message</div>
								<small>1 hours ago</small>
							</a>
						</li>						
						<li class="dropdown-menu-footer text-center">
							<a href="page-inbox.html">View all messages</a>
						</li>	
	        		</ul>
	      		</li>
				<li class="dropdown visible-md visible-lg">
	        		<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell-o"></i><span class="badge">3</span></a>
	        		<ul class="dropdown-menu">
						<li class="dropdown-menu-header">
							<strong>Notifications</strong>
							<div class="progress thin">
							  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
							    <span class="sr-only">30% Complete (success)</span>
							  </div>
							</div>
						</li>							
                        <li class="clearfix">
							<i class="fa fa-comment"></i> 
                            <a href="page-activity.html" class="notification-user"> Sharon Rose </a> 
                            <span class="notification-action"> replied to your </span> 
                            <a href="page-activity.html" class="notification-link"> comment</a>
                        </li>
                        <li class="clearfix">
                            <i class="fa fa-pencil"></i> 
                            <a href="page-activity.html" class="notification-user"> Nadine </a> 
                            <span class="notification-action"> just write a </span> 
                            <a href="page-activity.html" class="notification-link"> post</a>
                        </li>
                        <li class="clearfix">
                            <i class="fa fa-trash-o"></i> 
                            <a href="page-activity.html" class="notification-user"> Lorenzo </a> 
                            <span class="notification-action"> just remove <a href="#" class="notification-link"> 12 files</a></span> 
                        </li>                        
						<li class="dropdown-menu-footer text-center">
							<a href="page-activity.html">View all notification</a>
						</li>
	        		</ul>
	      		</li>
				<li class="dropdown visible-md visible-lg">
					 <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-gears"></i></a>					
					<ul class="dropdown-menu update-menu" role="menu">
						<li><a href="#"><i class="fa fa-database"></i> Database </a>
                        </li>
                        <li><a href="#"><i class="fa fa-bar-chart-o"></i> Connection </a>
                        </li>
                        <li><a href="#"><i class="fa fa-bell"></i> Notification </a>
                        </li>
                        <li><a href="#"><i class="fa fa-envelope"></i> Message </a>
                        </li>
                        <li><a href="#"><i class="fa fa-flash"></i> Traffic </a>
                        </li>
						<li><a href="#"><i class="fa fa-credit-card"></i> Invoices </a>
                        </li>
                        <li><a href="#"><i class="fa fa-dollar"></i> Finances </a>
                        </li>
                        <li><a href="#"><i class="fa fa-thumbs-o-up"></i> Orders </a>
                        </li>
						<li><a href="#"><i class="fa fa-folder"></i> Directories </a>
                        </li>
                        <li><a href="#"><i class="fa fa-users"></i> Users </a>
                        </li>		
					</ul>
				</li>
				<li class="dropdown visible-md visible-lg">
	        		<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img class="user-avatar" src="assets/img/avatar.jpg" alt="user-mail">jhonsmith@mail.com</a>
	        		<ul class="dropdown-menu">
						<li class="dropdown-menu-header">
							<strong>Account</strong>
						</li>						
						<li><a href="page-profile.html"><i class="fa fa-user"></i> Profile</a></li>
						<li><a href="page-login.html"><i class="fa fa-wrench"></i> Settings</a></li>
						<li><a href="page-invoice.html"><i class="fa fa-usd"></i> Payments <span class="label label-default">10</span></a></li>
						<li><a href="gallery.html"><i class="fa fa-file"></i> File <span class="label label-primary">27</span></a></li>
						<li class="divider"></li>						
						<li><a href="index.html"><i class="fa fa-sign-out"></i> Logout</a></li>	
	        		</ul>
	      		</li>
				<li><a href="index.html"><i class="fa fa-power-off"></i></a></li>
			</ul>
			
		</div>
		
	</div>
	<!-- end: Header -->
	
	<div class="container-fluid content">
	
		<div class="row">
				
			<!-- start: Main Menu -->
			<div class="sidebar ">
								
				<div class="sidebar-collapse">
					<div class="sidebar-header t-center">
                        <span><img class="text-logo" src="assets/img/logo1.png"><i class="fa fa-space-shuttle fa-3x blue"></i></span>
                    </div>										
					<div class="sidebar-menu">						
						<ul class="nav nav-sidebar">
							<li><a href="index.html"><i class="fa fa-laptop"></i><span class="text"> Dashboard</span></a></li>
							<li>
								<a href="#"><i class="fa fa-file-text"></i><span class="text"> Pages</span> <span class="fa fa-angle-down pull-right"></span></a>
								<ul class="nav sub">
									<li><a href="page-activity.html"><i class="fa fa-car"></i><span class="text"> Activity</span></a></li>
									<li><a href="page-inbox.html"><i class="fa fa-envelope"></i><span class="text"> Mail</span></a></li>
									<li><a href="page-invoice.html"><i class="fa fa-credit-card"></i><span class="text"> Invoice</span></a></li>								
									<li><a href="page-profile.html"><i class="fa fa-heart-o"></i><span class="text"> Profile</span></a></li>
									<li><a href="page-pricing-tables.html"><i class="fa fa-columns"></i><span class="text"> Pricing Tables</span></a></li>
									<li><a href="page-404.html"><i class="fa fa-puzzle-piece"></i><span class="text"> 404</span></a></li>
									<li><a href="page-500.html"><i class="fa fa-puzzle-piece"></i><span class="text"> 500</span></a></li>
									<li><a href="page-lockscreen.html"><i class="fa fa-lock"></i><span class="text"> LockScreen1</span></a></li>
									<li><a href="page-lockscreen2.html"><i class="fa fa-lock"></i><span class="text"> LockScreen2</span></a></li>
									<li><a href="page-login.html"><i class="fa fa-key"></i><span class="text"> Login Page</span></a></li>
									<li><a href="page-register.html"><i class="fa fa-sign-in"></i><span class="text"> Register Page</span></a></li>
								</ul>	
							</li>
							<li>
								<a href="#"><i class="fa fa-list-alt"></i><span class="text"> Forms</span> <span class="fa fa-angle-down pull-right"></span></a>
								<ul class="nav sub">
									<li><a href="form-elements.html"><i class="fa fa-indent"></i><span class="text"> Form elements</span></a></li>
									<li><a href="form-wizard.html"><i class="fa fa-tags"></i><span class="text"> Wizard</span></a></li>
									<li><a href="form-dropzone.html"><i class="fa fa-plus-square-o"></i><span class="text"> Dropzone Upload</span></a></li>
									<li><a href="form-x-editable.html"><i class="fa fa-pencil"></i><span class="text"> X-editable</span></a></li>
								</ul>
							</li>
							<li><a href="table.html"><i class="fa fa-table"></i><span class="text"> Tables</span></a></li>
							<li>
								<a href="#"><i class="fa fa-signal"></i><span class="text"> Visual Chart</span> <span class="fa fa-angle-down pull-right"></span></a>
								<ul class="nav sub">
									<li><a href="chart-flot.html"><i class="fa fa-random"></i><span class="text"> Flot Chart</span></a></li>
									<li><a href="chart-xchart.html"><i class="fa fa-retweet"></i><span class="text"> xChart</span></a></li>
									<li><a href="chart-other.html"><i class="fa fa-bar-chart-o"></i><span class="text"> Other</span></a></li>
								</ul>
							</li>
							<li>
								<a href="#"><i class="fa fa-briefcase"></i><span class="text"> UI Features</span> <span class="fa fa-angle-down pull-right"></span></a>
								<ul class="nav sub">
									<li><a href="ui-sliders-progress.html"><i class="fa fa-align-left"></i><span class="text"> Progress</span></a></li>
									<li><a href="ui-nestable-list.html"><i class="fa fa-outdent"></i><span class="text"> Nestable Lists</span></a></li>
									<li><a href="ui-elements.html"><i class="fa fa-list"></i><span class="text"> Elements</span></a></li>
									<li><a href="ui-panels.html"><i class="fa fa-list-alt"></i><span class="text"> Panels</span></a></li>
									<li><a href="ui-buttons.html"><i class="fa fa-th"></i><span class="text"> Buttons</span></a></li>
								</ul>
							</li>
							<li><a href="widgets.html"><i class="fa fa-life-bouy"></i><span class="text"> Widgets</span></a></li>
							<li><a href="typography.html"><i class="fa fa-font"></i><span class="text"> Typography</span></a></li>
							<li>
								<a href="#"><i class="fa fa-bolt"></i><span class="text"> Icons</span> <span class="fa fa-angle-down pull-right"></span></a>
								<ul class="nav sub">									
									<li><a href="icons-font-awesome.html"><i class="fa fa-meh-o"></i><span class="text"> Font Awesome</span></a></li>
									<li><a href="icons-climacons.html"><i class="fa fa-meh-o"></i><span class="text"> Climacons</span></a></li>
								</ul>
							</li>
							<li><a href="gallery.html"><i class="fa fa-picture-o"></i><span class="text"> Gallery</span></a></li>							
							<li><a href="calendar.html"><i class="fa fa-calendar"></i><span class="text"> Calendar</span></a></li>
						</ul>
					</div>					
				</div>
				<div class="sidebar-footer">					
					
					<div class="sidebar-brand">
						Proton
					</div>
					
					<ul class="sidebar-terms">
						<li><a href="index.html#">Terms</a></li>
						<li><a href="index.html#">Privacy</a></li>
						<li><a href="index.html#">Help</a></li>
						<li><a href="index.html#">About</a></li>
					</ul>
					
					<div class="copyright text-center">
						<small>Proton <i class="fa fa-coffee"></i> from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></small>
					</div>					
				</div>	
				
			</div>
			<!-- end: Main Menu -->
						
		<!-- start: Content -->
		<div class="main ">
		
			<div class="row">
				<div class="col-lg-12">
					<h3 class="page-header"><i class="fa fa-inbox"></i>Inbox</h3>
					<ol class="breadcrumb">
						<li><i class="fa fa-home"></i><a href="index.html">Home</a></li>
						<li><i class="fa fa-file-text"></i><a href="#">Pages</a></li>
						<li><i class="fa fa-envelope"></i><a href="#">Mail</a></li>
						<li><i class="fa fa-inbox"></i>Inbox</li>
					</ol>
				</div>
			</div>
			
			<div class="row inbox">
				
				
				<div class="col-md-3">
					
					<div class="panel panel-default">
						
						<div class="panel-body inbox-menu">
							
							<a href="page-inbox-compose.html" class="btn btn-danger btn-block">Compose</a>

							<ul>
								<li>
									<a href="page-inbox.html#">Inbox<span class="label label-danger">10</span></a>
								</li>
								<li>
									<a href="page-inbox.html#">Stared</a>
								</li>
								<li>
									<a href="page-inbox.html#"></i>Sent Mail</a>
								</li>
								<li>
									<a href="page-inbox.html#">Important<span class="label label-info">7</span></a>
								</li>
								<li>
									<a href="page-inbox.html#">Draft<span class="label label-warning">3</span></a>
								</li>
								<li>
									<a href="page-inbox.html#">Trash</a>
								</li>
								
								<li class="title">
									Labels
								</li>
								<li>
									<a href="page-inbox.html#">Work <span class="label label-danger"></span></a>
								</li>
								<li>
									<a href="page-inbox.html#">Private <span class="label label-info"></span></a>
								</li>
								<li>
									<a href="page-inbox.html#">Clients <span class="label label-success"></span></a>
								</li>
								<li>
									<a href="page-inbox.html#">Travel <span class="label label-danger"></span></a>
								</li>
								<li>
									<a href="page-inbox.html#">Promotion <span class="label label-success"></span></a>
								</li>
								<li>
									<a href="page-inbox.html#">News <span class="label label-warning"></span></a>
								</li>
								<li>
									<a href="page-inbox.html#">Update <span class="label label-info"></span></a>
								</li>
							</ul>
							
						</div>	
						
					</div>
					
					<div class="panel panel-default">
						
						<div class="panel-body contacts">
							
							<a href="page-inbox.html#" class="btn btn-primary btn-block"> + Contact</a>

							<ul>
								<li><span class="label label-danger"></span> Sarah Hiltser</li>
								<li><span class="label label-default"></span> Stephano Odo</li>
								<li><span class="label label-success"></span> Malras</li>
								<li><span class="label label-success"></span> Derbi Mondro</li>
								<li><span class="label label-warning"></span> Jessy Doe</li>
								<li><span class="label label-default"></span> Gerry</li>
								<li><span class="label label-success"></span> Kevin</li>
								<li><span class="label label-danger"></span> Carlina Minfa</li>
								
							</ul>
						
						</div>
					
					</div>			
					
				</div><!--/.col-->
				
				<div class="col-md-9">
					
					<div class="panel panel-default">
						
						<div class="panel-body">
							
							<span class="btn-group">
							  	<button class="btn btn-default"><span class="fa fa-envelope"></span></button>
							  	<button class="btn btn-default"><span class="fa fa-star"></span></button>
							  	<button class="btn btn-default"><span class="fa fa-star-o"></span></button>
								<button class="btn btn-default"><span class="fa fa-bookmark-o"></span></button>
							</span>

							<span class="btn-group">
							  	<button class="btn btn-default"><span class="fa fa-mail-reply"></span></button>
							  	<button class="btn btn-default"><span class="fa fa-mail-reply-all"></span></button>
							  	<button class="btn btn-default"><span class="fa fa-mail-forward"></span></button>
							</span>

							<button class="btn btn-default"><span class="fa fa-trash-o"></span></button>

							<span class="btn-group">
								<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-tags"></span> <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li><a href="page-inbox.html#">add label <span class="label label-danger">Work</span></a></li>
									<li><a href="page-inbox.html#">add label <span class="label label-info">Private</span></a></li>
									<li><a href="page-inbox.html#">add label <span class="label label-success">Clients</span></a></li>
									<li><a href="page-inbox.html#">add label <span class="label label-danger">Travel</span></a></li>
									<li><a href="page-inbox.html#">add label <span class="label label-success">Promotion</span></a></li>
									<li><a href="page-inbox.html#">add label <span class="label label-warning">News</span></a></li>
									<li><a href="page-inbox.html#">add label <span class="label label-info">Update</span></a></li>
								</ul>
							</span>
							<button class="btn btn-default"><span class="fa fa-refresh"></span></button>

							<span class="btn-group pull-right">
								<button class="btn btn-default">1-25 of 500</button>
							  	<button class="btn btn-default"><span class="fa fa-chevron-left"></span></button>
							  	<button class="btn btn-default"><span class="fa fa-chevron-right"></span></button>
							</span>

							<ul class="messages-list">

								<li class="unread">
									<a href="page-inbox-message.html">
										<div class="header">
											<span class="action"><i class="fa fa-square-o"></i></span> 
											<span class="from">Jhon Smith</span>
											<span class="date"><span class="fa fa-paper-clip"></span> Today, 08:45 AM</span>
										</div>
										<div class="title">
											<span class="action"><i class="fa fa-star-o"></i></span>
											Contrary to popular belief, Lorem Ipsum is not simply random text. 
										</div>	
										<div class="description">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.....  
										</div>
									</a>		
								</li>

								<li>
									<a href="page-inbox-message.html">
										<div class="header">
											<span class="action"><i class="fa fa-square-o"></i></span> 
											<span class="from">Jhon Smith</span>
											<span class="date"><span class="fa fa-paper-clip"></span> Today, 07:53 AM</span>
										</div>
										<div class="title">
											<span class="action"><i class="fa fa-star-o"></i></span>
											Contrary to popular belief, Lorem Ipsum is not simply random text. 
										</div>	
										<div class="description">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.....
										</div>
									</a>		
								</li>

								<li>
									<a href="page-inbox-message.html">
										<div class="header">
											<span class="action"><i class="fa fa-square-o"></i></span> 
											<span class="from">Jhon Smith</span>
											<span class="date">Today, 07:49 AM</span>
										</div>
										<div class="title">
											<span class="action"><i class="fa fa-star-o"></i></span>
											Contrary to popular belief, Lorem Ipsum is not simply random text. 
										</div>	
										<div class="description">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..... 
										</div>
									</a>	
								</li>
								<div class="divider"></div>
								<li class="unread">
									<a href="page-inbox-message.html">
										<div class="header">
											<span class="action"><i class="fa fa-square-o"></i></span> 
											<span class="from">Jhon Smith</span>
											<span class="date">Yesterday, 02:58 PM</span>
										</div>
										<div class="title">
											<span class="action"><i class="fa fa-star-o"></i></span>
											Contrary to popular belief, Lorem Ipsum is not simply random text. 
										</div>	
										<div class="description">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..... 
										</div>
									</a>
								</li>

								<li class="unread">
									<a href="page-inbox-message.html">
										<div class="header">
											<span class="action"><i class="fa fa-square-o"></i></span> 
											<span class="from">Jhon Smith</span>
											<span class="date">Yesterday, 01:20 PM</span>
										</div>
										<div class="title">
											<span class="action"><i class="fa fa-star-o"></i></span>
											Contrary to popular belief, Lorem Ipsum is not simply random text. 
										</div>	
										<div class="description">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..... 
										</div>		
										
									</a>
								</li>

								<li>
									<a href="page-inbox-message.html">
										<div class="header">
											<span class="action"><i class="fa fa-square-o"></i></span> 
											<span class="from">Jhon Smith</span>
											<span class="date">Yesterday, 11:57 AM</span>
										</div>
										<div class="title">
											<span class="action"><i class="fa fa-star-o"></i></span>
											Contrary to popular belief, Lorem Ipsum is not simply random text. 
										</div>	
										<div class="description">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..... 
										</div>
									</a>		
								</li>

								<li class="unread">
									<a href="page-inbox-message.html">
										<div class="header">
											<span class="action"><i class="fa fa-square-o"></i></span> 
											<span class="from">Jhon Smith</span>
											<span class="date">Yesterday, 10:05 AM</span>
										</div>
										<div class="title">
											<span class="action"><i class="fa fa-star-o"></i></span>
											Contrary to popular belief, Lorem Ipsum is not simply random text. 
										</div>	
										<div class="description">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.....
										</div>
									</a>											
								</li>
								
								<div class="divider"></div>

								<li>
									<a href="page-inbox-message.html">
										<div class="header">
											<span class="action"><i class="fa fa-square-o"></i></span> 
											<span class="from">Jhon Smith</span>
											<span class="date">1 Week ago</span>
										</div>
										<div class="title">
											<span class="action"><i class="fa fa-star-o"></i></span>
											Contrary to popular belief, Lorem Ipsum is not simply random text. 
										</div>	
										<div class="description">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..... 
									</a>		
								</li>
								<div class="divider"></div>
								<li>
									<a href="page-inbox-message.html">
										<div class="header">
											<span class="action"><i class="fa fa-square-o"></i></span> 
											<span class="from">Jhon Smith</span>
											<span class="date">3 Week ago</span>
										</div>
										<div class="title">
											<span class="action"><i class="fa fa-star-o"></i></span>
											Contrary to popular belief, Lorem Ipsum is not simply random text. 
										</div>	
										<div class="description">
											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..... 
										</div>
									</a>
								</li>

							</ul>
							
						</div>	
						
					</div>	
					
				</div><!--/.col-->	
						
			</div><!--/row-->
					
		</div>
		<!-- end: Content -->
		<br><br><br>
		
		
		
		<div id="usage">
			<ul>
				<li>
					<div class="title">Memory</div>
					<div class="bar">
						<div class="progress">
						  	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
						</div>
					</div>			
					<div class="desc">4GB of 8GB</div>
				</li>
				<li>
					<div class="title">HDD</div>
					<div class="bar">
						<div class="progress">
						  	<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"></div>
						</div>
					</div>			
					<div class="desc">250GB of 1TB</div>
				</li>
				<li>
					<div class="title">SSD</div>
					<div class="bar">
						<div class="progress">
					  		<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%"></div>
						</div>
					</div>			
					<div class="desc">700GB of 1TB</div>
				</li>
				<li>
					<div class="title">Bandwidth</div>
					<div class="bar">
						<div class="progress">
					  		<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"></div>
						</div>
					</div>			
					<div class="desc">90TB of 100TB</div>
				</li>				
			</ul>	
		</div>			
		
	</div><!--/container-->
		
	
	<div class="modal fade" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">Modal title</h4>
				</div>
				<div class="modal-body">
					<p>Here settings can be configured...</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div class="clearfix"></div>
	
		
	<!-- start: JavaScript-->
	<!--[if !IE]>-->

			<script src="assets/js/jquery-2.1.1.min.js"></script>

	<!--<![endif]-->

	<!--[if IE]>
	
		<script src="assets/js/jquery-1.11.1.min.js"></script>
	
	<![endif]-->

	<!--[if !IE]>-->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.1.1.min.js'>"+"<"+"/script>");
		</script>

	<!--<![endif]-->

	<!--[if IE]>
	
		<script type="text/javascript">
	 	window.jQuery || document.write("<script src='assets/js/jquery-1.11.1.min.js'>"+"<"+"/script>");
		</script>
		
	<![endif]-->
	<script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>	
	
	
	<!-- page scripts -->
	<script src="assets/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>
	<script src="assets/plugins/autosize/jquery.autosize.min.js"></script>
	<script src="assets/plugins/placeholder/jquery.placeholder.min.js"></script>
	
	<!-- theme scripts -->
	<script src="assets/js/SmoothScroll.js"></script>
	<script src="assets/js/jquery.mmenu.min.js"></script>
	<script src="assets/js/core.min.js"></script>
	
	<!-- inline scripts related to this page -->
	<script src="assets/js/pages/page-inbox.js"></script>
	
	<!-- end: JavaScript-->
	
</body>
</html>